{include file="public/toper" /}
<div class="layui-tab-brief main-tab-container">
    <ul class="layui-tab-title main-tab-title">
        <li ><a href="{:url('add')}">添加图集</a></li>
        <li class="layui-this"><a href="{:url('edit',array('id'=>$data['id']))}">图集编辑</a></li>
        <span class="main-tab-item">图集管理</span>
    </ul>
    <div class="layui-tab-content">
        <form class="layui-form">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属栏目</label>
                    <div class="layui-input-inline input-custom-width select-parent-id">
                        <select name="category_id" lay-verify="required">
                            <option value=""></option>
                            {$category_select}
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input" value="{$data.title}">
                        <input type="hidden" name="id" value="{$data.id}">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">是否推荐</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_recommend" value="1" title="是" {if condition="$data['is_recommend'] eq 1"} checked{/if}>
                        <input type="radio" name="is_recommend" value="0" title="否" {if
                               condition="$data['is_recommend'] eq 0"} checked{/if}>
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台推荐调用</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">是否置顶</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_top" value="1" title="是" {if condition="$data['is_top'] eq 1"} checked{/if}>
                        <input type="radio" name="is_top" value="0" title="否" {if condition="$data['is_top'] eq 0"} checked{/if}>
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台置顶调用</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">是否显示</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_show" value="1" title="是" {if condition="$data['is_show'] eq 1"} checked{/if}>
                        <input type="radio" name="is_show" value="0" title="否" {if condition="$data['is_show'] eq 0"} checked{/if}>
                    </div>
                    <div class="layui-form-mid layui-word-aux">用于前台显示调用</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">是否加密</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="radio" name="is_pwd" value="1" title="是" lay-filter="is_pwd" {if condition="$data['is_pwd'] neq '0'"} checked{/if}>
                        <input type="radio" name="is_pwd" value="0" title="否" lay-filter="is_pwd" {if condition="$data['is_pwd'] eq '0'"} checked{/if}>
                        <input type="text" name="pwd"  placeholder="请输入4位密码,为空则随机4位" autocomplete="off" class="layui-input"  maxlength="4" {if condition="$data['is_pwd'] neq '0'"} value="{$data.is_pwd}" {else /} style="display: none;"{/if}>
                    </div>
                    <div class="layui-form-mid layui-word-aux">查看是否需要密码</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="keywords" autocomplete="off" class="layui-input" value="{$data.keywords}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">关键词以英文逗号隔开</div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">图集描述</label>
                    <div class="layui-input-inline input-custom-width">
                        <textarea name="description" class="layui-textarea">{$data.description}</textarea>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">图集上传</label>
                    <div class="layui-input-block images-block-container">
                        <div class="image-add-blcok">
                            {notempty name="$data['images']"}
                                {foreach name="$data['images']" id='images'}
                                    <div class="image-block">
                                        <input type="hidden" name="images[{$key}]" value="{$images}" class="images-input">
                                        <img class="img" src="{$images}">
                                        <div class="image-block-mask">
                                            <span class="del_btn">
                                                <i class="layui-icon">&#x1006;</i>
                                            </span>
                                            <a class="layui-btn set-index">设为主图</a>
                                        </div>
                                    </div>
                                {/foreach}
                            {/notempty}
                            <button type="button" class="layui-btn layui-upload-button" id="images">
                                <i class="layui-icon layui-icon-upload-drag"></i>图片
                            </button>

                        </div>
                    </div>
                    <div class="layui-form-mid layui-word-aux">默认第一张为主图</div>
                </div>



                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        {if condition="$setting['edit_type'] eq '1'"}
                            <textarea name="content" lay-verify="layedit" autocomplete="off" placeholder="请输入内容"
                                  class="layui-textarea layui-hide" id="edit">{$data['content']}</textarea>
                        {elseif condition="$setting['edit_type'] eq '2'" /}
                            {:Lemon_get_umeditior(htmlspecialchars_decode($data['content']))}
                        {elseif condition="$setting['edit_type'] eq '3'" /}
                            {:Lemon_get_wangEditor(htmlspecialchars_decode($data['content']))}
                        {/if}
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">添加时间</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="create_time" value="{$data.create_time}" id="date" lay-verify="datetime" placeholder="YYYY-MM-DD hh:mm:ss" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">默认是当前时间</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">点击量</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="hits" autocomplete="off" class="layui-input" value="{$data.hits}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">链接地址</label>
                    <div class="layui-input-inline input-custom-width">
                        <input type="text" name="url" autocomplete="off" class="layui-input" value="{$data.url}">
                        {:token()}
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="cate_add">立即提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
<script type="text/javascript">
    layui.use(['element', 'form', 'upload', 'layedit' ,'laydate'], function () {
        var element = layui.element
                , form = layui.form
                , jq = layui.$
                , layedit = layui.layedit
                ,laydate = layui.laydate;
        var upload = layui.upload;

        //创建一个编辑器
        layedit.set({
            uploadImage: {
                url: "{:url('upload/layedit_upimage')}" //接口url
                , type: 'post' //默认post
            }
        });
        var _edit = layedit.build('edit');
        //表单验证
        form.verify({
            //编辑器数据同步
            layedit: function (value) {
                layedit.sync(_edit);
            }
        });
        //时间插件
        laydate.render({
            elem: '#date' //指定元素
            ,type: 'datetime'
        });
        //图集上传
        upload.render({
            elem:'#images'
            , size: "{$Think.POST_MAX *1024}",
            url: '{:url("upload/upimage")}'
            ,auto:true
            ,before: function(input){
                loading = layer.load(2, {
                    shade: [0.2,'#000'] //0.2透明度的白色背景
                });

            }
            ,done: function(res){

                var id = jq('.image-block').length;

                id++;

                //执行上传请求后的回调
                layer.close(loading);

                var image_str = '<div class="image-block">' +
                        '<input type="hidden" name="images['+id+']" value="'+res.path+'" class="images-input">' +
                        '<img class="img" src="'+res.path+'">' +
                        '<div class="image-block-mask">' +
                        '<span class="del_btn">' +
                        '<i class="layui-icon">&#x1006;</i>' +
                        '</span>' +
                        '<a class="layui-btn set-index">设为主图</a>' +
                        '</div></div>';
                jq('.image-add-blcok').append(image_str);
                layer.msg(res.msg, {icon: 1, time: 1000});
            },error:function (index,upload) {
                layer.close(loading);
                layer.msg('上传失败', {icon: 2, anim: 6, time: 1000});
            }
        });

        //设为主图
        jq('.images-block-container').on('click','.set-index',function(){
            var index_block = jq(this).parents('.image-block').clone();
            jq(this).parents('.image-block').remove();
            jq('.images-block-container').prepend(index_block);
            jq('.image-block').each(function(e){
                var index = e+1;
                jq(this).find('.images-input').attr('name','images['+index+']')
            });
        });
        //删除图片
        jq('.images-block-container').on('click','.del_btn',function(){
            var index_image = jq(this).parents('.image-block').remove();
        });

        form.on('radio(is_pwd)', function(data){
            if(data.value == 1){
                jq("input[name=pwd]").css('display','block');
            }else{
                jq("input[name=pwd]").css('display','none');
            }

        });


        //监听提交
        form.on('submit(cate_add)', function (data) {
            loading = layer.load(2, {
                shade: [0.2, '#000'] //0.2透明度的白色背景
            });
            var id = jq('.image-block').length;
            if(id == 0){
                layer.close(loading);
                layer.msg('最少上传一张图片', {icon: 2, anim: 6, time: 1000});
                return false;
            }

            var param = data.field;
            jq.post(
                    '{:url("editPost")}',
                    param,
                    function (data) {
                        if (data.code == 200) {
                            layer.close(loading);
                            layer.msg(data.msg, {icon: 1, time: 1000}, function () {
                                location.reload();//do something
                            });
                        } else {
                            layer.close(loading);
                            layer.msg(data.msg, {icon: 2, anim: 6, time: 1000});
                        }
                    }).error(function () {
                layer.close(loading);
                layer.msg('服务器错误', {icon: 2, anim: 6, time: 1000});
            });
            layer.close(loading);
            return false;
        });

    })
</script>
</body>
</html>

